<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-会员</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.md5.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 300px;
        display: block;
    }

    .el-icon-circle-plus:hover{
        cursor: pointer;
    }
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4 df mb-9">
        <div>
            <el-form ref="form" :model="form" label-width="150px" :rules="rules">
                <el-form-item label="编号：" v-if="form.id" style="display: none;">
                    <el-input v-model="form.id" style="width:400px;" readonly></el-input>
                </el-form-item>
                <el-form-item label="用户名称：" prop="fullName">
                    <el-input v-model="form.fullName" style="width:400px;" placeholder="请输入用户名称" ></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password" required>
                    <el-input v-model="form.password" style="width:400px;" placeholder="请输入密码" ></el-input>
                </el-form-item>
<!--                <el-form-item label="类型：" >-->
<!--                    <el-select v-model="form.memberTypeId" placeholder="请选择类型" size="small" filterable style="width:400px;" clearable >-->
<!--                        <el-option-->
<!--                                v-for="item in memberTypeOptions"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="充值金额：" prop="balance">-->
<!--                    <el-input v-model="form.balance" style="width:400px;" placeholder="请输入充值金额"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="手机号码：" required prop="phoneNumber">
                    <el-input v-model="form.phoneNumber" style="width:400px;" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" required prop="idCard">
                    <el-input v-model="form.idCard" style="width:400px;" placeholder="请输入身份证号"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" required prop="email">
                    <el-input v-model="form.email" style="width:400px;" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>



    </div>
</div>
</body>

<script type="text/javascript">

    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data: {
            form:{
                fullName : "",
                password : "",
                balance : "",
                phoneNumber : "",
                idCard : "",
                memberTypeId:"",
                email:""
            },
            rules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
            },
            memberTypeOptions: [{
                value: '1',
                label: '普通会员'
            }, {
                value: '2',
                label: '白银会员'
            }, {
                value: '3',
                label: '黄金会员'
            }],

        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                let id = getQueryString("id")
                if(id){
                    that.form.id = id;
                    that.getMemberByIdMethod();
                    //获取信息
                }
                this.getAllTypeListMethod();
            });
        },
        methods: {

            //获取所有的图书类型的数据
            getAllTypeListMethod() {
                let that = this;
                that.allTypeList = [];
                requestApiTB("type/getAllTypeList", {}, "POST", function (res) {
                    if (res.code === 0) {
                        that.allTypeList = res.data;
                    }
                });
            },

            // 提交的方法
            onSubmit() {
                let that = this;
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        let deepCopyForm = JSON.parse(JSON.stringify(that.form));
                        if(!judgeIdCard(deepCopyForm.idCard)){
                            that.$message.error("身份证号码不正确");
                            return;
                        }
                        if(!judgeMobile(deepCopyForm.phoneNumber)){
                            that.$message.error("电话号码不正确");
                            return;
                        }
                        if(!judgeEmail(deepCopyForm.email)){
                            that.$message.error("邮箱不正确");
                            return;
                        }

                        // if (!/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(deepCopyForm.balance)) {
                        //     that.$message.error("充值额不正确");
                        //     return;
                        // }

                        let url = "";
                        if (!that.form.id) {
                            deepCopyForm.password = $.md5(deepCopyForm.password);
                            url = "member/addMember";
                        } else {
                            url = "member/editMember";
                        }
                        requestApiTB(url, deepCopyForm, 'POST', function (res) {
                            if (res.code === 0) {
                                that.$message.success("执行成功");
                                if (!that.form.id) {
                                    that.$refs['form'].resetFields();//重置字段
                                }
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    } else {
                        that.$message.error("表单校验不通过");
                        return false;
                    }
                });
            },

            //根据id获取会员的信息
            getMemberByIdMethod() {
                let that = this;
                requestApiTB("member/getMemberById", {"id": that.form.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        that.form = res.data;
                    } else {
                        that.$message.error(res.msg);
                    }
                });
            },


        }
    })
</script>
</html>